<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { ref } from 'vue';

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({id: i + 1, name: '秦始皇', life: "49", mode: '疾病', layer: 1},);
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 筛选 - 死亡方式
const searchType = ref()
const searchOptionsType = ref([
    { value: '1', label: '善终' },
    { value: '2', label: '天灾' },
    { value: '3', label: '人祸' },
    { value: '4', label: '疾病' }
])
</script>

<template>
    <!-- 十八层地狱-设备管理 -->
    <div class="infernal-device">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-select v-model="searchType" placeholder="请选择设备" size="large" clearable>
                        <el-option v-for="item in searchOptionsType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="device-list">
            <el-row :gutter="20" v-for="item1 in 2" :key="item1" class="z-m-b-20">
                <el-col :span="4" v-for="item2 in 6" :key="item2">
                    <div class="device-item z-flex-column">
                        <div class="z-p-16 z-font-14">
                            <div class="z-flex-justify-between">
                                <span>{{item1 + item2 < 7 ? '刀山' : '油锅'  }}{{item1 + item2}}</span>
                                <span class="z-c-success">设备正常</span>
                            </div>
                            <div class="z-flex-justify-between z-m-t-14 z999999">
                                <span>操作员：小鬼{{item2}}号</span>
                                <span>已工作100年</span>
                            </div>
                        </div>
                        <div class="z-p-10 z-flex-1 z-flex-center z-border-top z-border-bottom" style="background-color: rgb(56, 56, 56)">
                            <el-icon :size="80" color="#fff" v-if="item1 + item2 < 5"><Icon icon="KnifeFork" /></el-icon>
                            <el-icon :size="80" color="#fff" v-else><Icon icon="Food" /></el-icon>
                        </div>
                        <div class="z-p-12 z-flex-center z-font-14">
                            <span class="z-c-primary z-m-8">暂停工作</span>
                            <span class="z-c-primary z-m-8">使用记录</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">
.device-item{
    width: 100%;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
</style>